<template>
  <div id="right-line">
    <div class="title">终端个数增长曲线</div>
    <div id="echarts-line"></div>
  </div>
</template>
<script>
export default {
  name: "rightLine",
  components: {},
  props: {},
  data() {
    return {
      xData: ["11.16", "11.17", "11.18", "11.19", "11.20", "11.21"], //横坐标
      yData: [100, 300, 400, 500, 600, 500], //数据
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getLoadEcharts();
  },
  methods: {
    getLoadEcharts() {
      var myChart = this.$echarts.init(document.getElementById("echarts-line"));

      var option = {
        xAxis: [
          {
            data: this.xData,
            axisLine: {
              show: true, // Y轴
              lineStyle: {
                color: "#fff", // 颜色
              },
            },
          },
        ],
        dataZoom: [
          {
            type: "inside",
            // realtime: true,
            start: 0,
            end: 500,
          },
        ],

        yAxis: {
          axisTick: {
            //y轴刻度线
            // show: true,
          },
          axisLine: {
            show: true, // Y轴
            lineStyle: {
              color: "#fff", // 颜色
            },
          },
          splitLine: {
            // 表格里面Y轴线条
            show: true,
            color: "#fff",
          },
        },
        grid: {
          show: true,
          left: "15%",
          top: "15%",
          right: "10%",
          bottom: "20%",
        },
        series: [
          {
            type: "line",
            data: this.yData,
            smooth: true,
          },
        ],
      };

      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style scoped>
#right-line {
  width: 100%;
  height: 45%;
}

.title {
  width: 100%;
  height: 12%;
  font-size: 12px;
  background: rgba(15, 48, 113, 1);
  color: #fff;
}
#echarts-line {
  background: #0e378b;
  opacity: 0.5;
  width: 100%;
  height: 88%;
}
</style>
